<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/business/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script><![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>区域图 - 系统统计 - h-ui.admin.pro v1.0</title>
    <meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        系统统计
        <span class="c-gray en">/</span>
        区域图
        <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel">
                            <div class="panel-header">
                                地图
                            </div>
                            <div class="panel-body">
                                <div id="echarts-1" style="height:520px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <article>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/echarts/4.1.0.rc2/echarts.min.js"></script>
<script type="text/javascript" src="lib/echarts/4.1.0.rc2/china.js"></script>
<script type="text/javascript" src="lib/echarts/4.1.0.rc2/all-province.js"></script>
<script type="text/javascript">
    var chinaData = [
        {name: '北京', value: 1000},
        {name: '天津', value: 890},
        {name: '上海', value: 800},
        {name: '重庆', value: 500},
        {name: '河北', value: 300},
        {name: '河南', value: 400},
        {name: '云南', value: 358},
        {name: '辽宁', value: 0},
        {name: '黑龙江', value: 0},
        {name: '湖南', value: 0},
        {name: '安徽', value: 10},
        {name: '山东', value: 35},
        {name: '新疆', value: 20},
        {name: '江苏', value: 55},
        {name: '浙江', value: 66},
        {name: '江西', value: 77},
        {name: '湖北', value: 88},
        {name: '广西', value: 99},
        {name: '甘肃', value: 44},
        {name: '山西', value: 55},
        {name: '内蒙古', value: 43},
        {name: '陕西', value: 67},
        {name: '吉林', value: 68},
        {name: '福建', value: 87},
        {name: '贵州', value: 56},
        {name: '广东', value: 97},
        {name: '青海', value: 38},
        {name: '西藏', value: 900},
        {name: '四川', value: 2},
        {name: '宁夏', value: 55},
        {name: '海南', value: 66},
        {name: '台湾', value: 33},
        {name: '香港', value: 44},
        {name: '澳门', value: 77}
    ];

    function changeMap() {
        var myChart = echarts.init(document.getElementById('echarts-1'));
        option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                left: 'left',
                data: ['强'],
                textStyle: {
                    color: '#ccc'
                }
            },
            dataRange: {
                min: 0,
                max: 1000,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],
                calculable: true,
                color: ["#1890ff", "#e2fbfe"]
            },
            toolbox: {
                show: false,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode: 'single',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true,
                            itemStyle: {
                                areaColor: '#296fd6',
                            }
                        }
                    },
                    data: chinaData,
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    $(function () {
        changeMap();
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
